<template>
  <div :class="{'hidden':!selfShow}" id="bg" @click="closeBook">
    <div id="mg"
         style="width: 900px;padding-bottom: 40px;margin: 10px auto;background:#FFFFFF;border-radius: 10px;padding-top: 35px"
         v-if="bookInfo">
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.projectName")}}：{{bookInfo.projectName}}</span>
        </div>
        <div class="top-col-right">
          <span>{{$t("Info.bookName")}}：《{{bookInfo.bookName}}》</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.uploadTime")}}：{{createTime}}</span>
        </div>
        <div class="top-col-right">
          <span>{{$t("Info.updateTime")}}：{{updateTime}}</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.bookNum")}} ISBN：{{bookInfo.barCode}}</span>
        </div>
        <div class="top-col-right">
          <span>{{$t("Info.recommend")}}：{{canCommend}}</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.sex")}}：{{gender}}</span>
        </div>
        <div class="top-col-right">
          <span>{{$t("Info.ageGroup")}}：{{bookInfo.ageGroup}}岁</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.bookSeries")}}：{{bookInfo.bookSeriesName}}</span>
        </div>
        <div class="top-col-right">
          <span>{{$t("Info.pressName")}}：{{bookInfo.pressName}}</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.BookClassification")}}：{{bookInfo.bookClassifactionName}}</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.keyWords")}}：{{keyWord}}</span>
        </div>
      </div>
      <div class="top-line2">
        <div class="top-col-left2">
          <span>{{$t("Info.blurb")}}：</span>
        </div>
        <div class="top-col-right2">
          <textarea>{{bookInfo.bookDesc}}</textarea>
        </div>
      </div>
      <div class="top-line" style="margin-top: 35px">
        <div class="top-col-left">
          <span>{{$t("Info.bookTag")}}：{{bookInfo.bookTags}}</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.bookType")}}：{{bookInfo.bookCategoryName }}</span>
        </div>
        <div class="top-col-right">
          <span>{{$t("Info.publisher")}}：{{bookInfo.bookPublisherName}}</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.purchaseAddress")}}：{{bookUrl}}</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.paymentMethod")}}：{{payType}}</span>
        </div>
        <div class="top-col-right">
          <span>{{$t("Info.pageNum")}}：{{bookInfo.bookLockedPage}}</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.price")}}：{{bookInfo.price}}</span>
        </div>
        <div class="top-col-right">
          <span>{{$t("Info.scanFree")}}：{{freeScan}}</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.bookPlatform")}}：{{version}}</span>
        </div>
        <div class="top-col-right">
          <span>{{$t("Info.bookVersion")}}：{{bookBelong}}</span>
        </div>
      </div>
      <div class="top-line">
        <div class="top-col-left">
          <span>{{$t("Info.adaptiveVersion")}}：{{bookInfo.workingVersion}}</span>
        </div>
        <div class="top-col-right">
          <span>ISLI：{{isli}}</span>
        </div>
      </div>
      <div class="top-line3" v-if="bookInfo.bookPreviewPageUrl!==null">
        <div class="img-content">
          <img :src="bookInfo.bookCoverUrl"/>
          <span class="content-text">{{$t("Info.bookCover")}}</span>
        </div>
        <div class="img-content">
          <img :src="bookInfo.bookPreviewPageUrl"/>
          <span class="content-text">{{$t("Info.previewPage")}}</span>
        </div>
        <div class="img-content">
          <div id="qrCode" style="height:400px">
            <div id='code'></div>
            <canvas ref="canvas"></canvas>
          </div>
          <span class="content-text">{{$t("Info.scanCode")}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import bus from '../../assets/eventBus'
  import util from '../../common/util'
  import QRCode from 'qrcode'

  export default {
    name: "BookSlot",
    props: ['bookInfo'],
    data() {
      return {
        selfShow: false
      }
    },
    computed: {
      createTime() {
        return util.formate(this.bookInfo.bookCreateTime)
      },
      updateTime() {
        return util.formate(this.bookInfo.bookUpdateTime)
      },
      canCommend() {
        if (this.bookInfo.canCommend === 0) {
          return '不可被推荐'
        } else if (this.bookInfo.canCommend === 1) {
          return '可被推荐'
        }
      },
      gender() {
        if (this.bookInfo.fApplyGender === 0) {
          return 'ALL'
        } else if (this.bookInfo.fApplyGender === 1) {
          return '男'
        } else if (this.bookInfo.fApplyGender === 2) {
          return '女'
        }
      },
      payType() {
        if (this.bookInfo.bookUnlockType === -1) {
          return '免费'
        } else if (this.bookInfo.bookUnlockType === 0) {
          return '设备激活码'
        } else if (this.bookInfo.bookUnlockType === 1) {
          return '梦想币'
        } else if (this.bookInfo.bookUnlockType === 2) {
          return '美惠树'
        } else if (this.bookInfo.bookUnlockType === 4) {
          return '梦想钻'
        } else if (this.bookInfo.bookUnlockType === 5) {
          return '梦想币+激活码'
        } else if (this.bookInfo.bookUnlockType === 6) {
          return '梦想钻+激活码'
        } else if (this.bookInfo.bookUnlockType === 7) {
          return '设备激活码'
        } else if (this.bookInfo.bookUnlockType === 8) {
          return '设备激活码+梦想钻'
        } else {
          return '免费'
        }
      },
      freeScan() {
        if (this.bookInfo.fIsFreeScan !== null)
          return this.bookInfo.fIsFreeScan === true ? '免费' : '不免费'
      },
      version() {
        if (this.bookInfo.mobileVersion === 0) {
          return '通用'
        } else if (this.bookInfo.mobileVersion === 1) {
          return 'ios'
        } else {
          return '安卓'
        }
      },
      bookBelong() {
        if (this.bookInfo.fBelong === 1) {
          return '国际版'
        } else {
          return '国内版'
        }
      },
      isli() {
        if (this.bookInfo.isSupportIsli !== null)
          return this.bookInfo.isSupportIsli === 0 ? 'X' : '支持'
      },
      keyWord() {
        return this.bookInfo.keyWords === "" ? '无' : this.bookInfo.keyWords
      },
      bookUrl() {
        return this.bookInfo.masBookMailUrl === "" ? '无' : this.bookInfo.masBookMailUrl
      }
    },
    mounted() {
      /**
       * 打开确认搜索弹窗
       */
      let that = this
        bus.$on('showBookInfo', function () {
          that.selfShow = true
        })
    },
    updated(){
      this.useqrcode()
    },
    methods: {
      useqrcode(){
        if(this.bookInfo&&this.bookInfo.bookPreviewPageUrl!==null){
          var canvas =this.$refs.canvas
          QRCode.toCanvas(canvas, this.bookInfo.imageQrCode,function (error) {
            if (error) console.error(error)
            console.log('QRCode success!');
          })
        }
      },
      /**
       * 关闭确认弹窗
       */
      closeBook() {
        this.selfShow = false
      }
    }
  }
</script>

<style scoped>
  .hidden {
    display: none;
  }

  #bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    top: 0;
    z-index: 999;
    overflow-y: auto;
  }

  ::-webkit-scrollbar {
    width: 2px;
  }

  .top-line, .top-line2, .top-line3 {
    width: 800px;
    height: 30px;
    margin: 10px auto;
    display: flex;
    line-height: 30px;
    color: #555555;
  }

  .top-line3 {
    height: 260px;
    width: 700px;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
  }

  .top-line2 {
    height: 100px;
    line-height: 100px;
  }

  .top-col-left, .top-col-right {
    width: 600px;
    height: 30px;
  }

  .top-col-left2 {
    width: 80px;
    height: 100px;
  }

  .top-col-right2 {
    width: 720px;
  }

  .top-col-right {
    width: 355px;
  }

  textarea {
    width: 720px;
    height: 100px;
    background: #F3F3F3;
    color: #999999;
    line-height: 24px;
    padding: 5px 10px 5px 10px;
  }

  img {
    width: 200px;
    height: 220px;
  }

  .img-content {
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .content-text {
    margin-top: 10px;
  }
</style>
